<template>
    <div class="sub-left-nav">
        <h4>{{$route.meta.moduleName}}</h4>
        <el-menu
            :default-active="defaultActive"
            text-color="#555"
            :router="true"
            :default-openeds="['1']">
            <template v-for="firstNav in nav" :key="firstNav">
                <el-menu-item v-if="!firstNav.children" :index="firstNav.url">
                    <template #title>{{firstNav.title}}</template>
                </el-menu-item>
                <el-submenu v-if="firstNav.children" :index="firstNav.url">
                    <template #title>
                        {{firstNav.title}}
                    </template>
                    <el-menu-item-group >
                        <el-menu-item v-for="secondNav in firstNav.children" :key="secondNav" :index="secondNav.url">{{secondNav.title}}</el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
            </template>
        </el-menu>
    </div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref } from 'vue'

export default defineComponent({
    setup () {
        let nav = reactive([
            {title:'总览', url:'/infomng/home'},
            {title:'信息发布', url:'1', children:[
                {title: '全部', url: '/infomng/infopublish'},
                {title: '草稿', url: '1-2'},
                {title: '待审核', url: '1-3'},
                {title: '已审核', url: '1-4'},
            ]},
            {title:'信息审核', url:'2', children:[
                {title: '全部', url: '2-1'},
                {title: '未审核', url: '2-2'},
                {title: '已审核', url: '2-3'},
            ]},
            {title:'信息管理', url:'3', children:[
                {title: '信息维护', url: '3-1'},
                {title: '信息查询', url: '3-2'},
                {title: '信息迁移', url: '3-3'},
            ]},
        ])
        let defaultActive = ref(nav[0].url).value
        return {
            nav,
            defaultActive,
        }
    }
})
</script>

<style scoped lang="scss">


</style>